<%@page import="java.sql.*"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据首字查成语</title>
<style type="text/css">
h1{ color:red; }
.kuang{ padding:20px; }
.content{ border: 1px solid gray; padding:10px; border-radius: 10px; margin: 10px 0;}
input, button { padding:10px; border-radius: 6px; outline: none; }
.msg{ color:red; font-weight: bold; margin:10px 0;}
.history>p:nth-child(even){
	color: red;
	font-weight: bold;
}
</style>
</head>
<body><% 
request.setCharacterEncoding("utf-8");//设置post提交数据的编码格式
String cy = request.getParameter("chengyu");//获取用户接龙的成语
String history=request.getParameter("history");//获取接龙的历史
if(history==null)history="";
boolean isChengyu=false;
String first=null;//计算机接龙成语的首字，或客户端用户接龙成语的首字
String msg=null;//发送到客户端的错误信息
boolean isUserWin=false;//用户赢了吗？
if(cy!=null){ //提交数据到该页面来的
	cy=cy.trim(); //清除用户输入成语两端的空白
	String url="jdbc:mysql://localhost:3306/db?serverTimezone=PRC&allowMultiQueries=true";
	//(1)加载驱动
	Class.forName("com.mysql.cj.jdbc.Driver");
	//(2)创建数据库连接
	Connection cn = DriverManager.getConnection(url,"root","12qwas");//  "+first+"
	//(3)创建预处理语句对象以执行sql指令
	PreparedStatement ps = cn.prepareStatement("select cy from chengyu where cy=?");
	ps.setString(1, cy);
	ResultSet rs= ps.executeQuery();
	
	isChengyu = rs.next();
	if(isChengyu){ //用户输入的是成语，该计算机接龙了
		history+=","+cy;//将用户输入的成语保存到接龙历史中
		first=cy.substring(cy.length()-1);//服务器端接龙时成语的首字
		ps = cn.prepareStatement("select * from chengyu where first=? order by rand() limit 1");//计算机查询接龙的成语
		ps.setString(1, first);
		rs= ps.executeQuery();
		if(rs.next()){//计算机接龙成功
			cy=rs.getString("cy");//获取计算机接龙的成语
			history+=","+cy;//计算机接龙的成语保存到接龙历史中
			first=cy.substring(cy.length()-1);//客户端接龙时成语的首字
		}else{
			msg="真厉害！恭喜你在成语接龙大战中战胜了计算机~";
			isUserWin=true;
		}
	}else{
		msg="Sorry，你输入的“"+cy+"”不是成语~";
		first=cy.substring(0,1); //客户端接龙时成语的首字
	}
	rs.close();
	ps.close();
	cn.close();
}
%>
<div class='kuang'>
	<div class='content'>
		<h1>人机大战之成语接龙</h1>
		<div class='history'><%
String[]cys=history.split(",");
for(int i=1;i<cys.length;++i){
	out.println("<p>"+i+". ["+(i%2==0?"机":"人")+"] "+cys[i]+"</p>");
}
%></div>
	</div>
	<form method='post' name='xx'>
		<div class='msg'><%= msg==null?"":msg %></div>
		<input name='chengyu'<%=isUserWin?" disabled":"" %>/>
		<input type="hidden" name='history' value='<%= history %>'>
		<button<%=isUserWin?" disabled":"" %> onclick='return check()'>接龙</button>
		<button type='button' onclick='location.href="index.jsp"'>再来一局</button>	
	</form>
</div>
<script type="text/javascript">
//检查用户输入的成语是否满足成语接龙的要求
//满足要求时返回true，可以提交表单
//不满足时返回false，取消表单操作，同时提示错误信息
function check(){
	let first='<%= history.isEmpty()?"":first %>' //first表示客户端接龙时成语的首字，若值为空字符串，则用户输入的成语不受首字的限制
	let msg=null
	let cy=document.querySelector('input[name="chengyu"]').value.trim()
	if(cy.startsWith(first)){ //用户输入的成语是以first开头吗？
		if(cy.length>=3 && cy.length<=14)return true //提交表单
		msg="请正确输入成语，输入的成语应该在3到14个汉字之内~"
	}else{
		msg="Sorry，违反接龙规则，请输入以“"+first+"”字开头的成语~"	
	}
	document.querySelector('.msg').innerText=msg //显示错误信息
	return false; //取消表单的提交
}
</script>
</body>
</html>